// @ts-ignore
import { PageContainer } from '@ant-design/pro-components';
// @ts-ignore
import {Button, Card, Image} from 'antd';
// @ts-ignore
import {React, useState, useEffect, useCallback} from 'react';
import {getAllBooks} from "@/services/ant-design-pro/api";
import './BookLandingPage.less'
import { history } from '@umijs/max'

const BookLandingPage: React.FC = () => {
  const [bookList, setBookList] = useState<API.BookInfo>({})
  const getBookList = async () => {
    try {
      const res = await getAllBooks();
      if (res.data) {
        setBookList(res);
      }
    } catch (error) {
      console.log(error);
    }
  };
  useEffect(() => {
    getBookList().then();
  }, []);

  const clickForDetail = useCallback((id: number) => {
    history.push(`/book/detail/${id}`);
  }, [])




  return(
    <PageContainer>

      {bookList.data &&
        bookList.data.map((book, index)=>(
          <Card
            key={index}
          >
            <Image
              src={book.picture}
              style={{
                float: "left",
                height: "200px",
              }}
            ></Image>
            <div
              style={{
                float: "right",
                width: "75%"
              }}
            >
              <div
                className={"infoBox"}
                style={{
                  float: "left"
                }}
              >
                <b>{book.name}</b> <br/>
                <text className={"sort"}>分类：{book.sort}</text>
                <p className={"score"}> 智库评分：{book.score}</p>
                <p>作者：{book.author}</p>
                <p>藏书地点：{book.location}</p>
                <p>现有余量：{book.num}</p>
              </div>

              <div
                className={"buttonBox"}
                style={{
                  float: "right",
                  marginTop: "20px"
                }}
              >
                <Button type={"primary"} className={"myButton"} onClick={() => clickForDetail(book.id)}>查看详情</Button> <br/>
                <Button type={"primary"} className={"myButton"} onClick={() => clickForDetail(book.id)} ghost>借阅</Button>
              </div>

            </div>


          </Card>
        ))
      }
    </PageContainer>
  )
};
export default BookLandingPage;
